<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>js基础-流程控制if入门</title>
  <link rel="stylesheet" href="../css/common.css">
</head>

<body>

  <!-- 输入的是否为数的判断 -->
  <input type="text" id="txtNum" placeholder="请输入数值">
  <button id="btnNum">确定</button>
  <span id="spNum"></span>
  <hr>
  <!-- 颜色输入效果相关部分 -->
  红：<input type="text" id="txtRed">
  绿：<input type="text" id="txtGreen">
  蓝：<input type="text" id="txtBlue">
  <button id="btnColor">确定</button>
  <span id="spColor"></span>
  <div id="divColor">背景颜色更改演示区域</div>

  <script src="js/h05.js"></script>
  <!-- 
    通过js控制或者修改样式的流程
    第一步：编写页面，完成基本元素构架
    第二步：编写标准形态下的css样式并查看是否正确
    第三步：编写变化形态下的css样式并测试是否正确
    第四步：js获取相关元素并检查是否正确获取到
    第五步：处理css样式变化（包括事件和切换过程）
    容易出错的部分：
      页面元素没有正确获取
      css名称或者效果不正确
      没有正确的处理好相应元素
  -->
</body>

</html>